import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import $ from 'jquery'
import NavTabsLayout from '../_Layout/NavTabsLayout'
import FollowingBanner from '../../widgets/Banner/FollowingBanner'
import ImgWaterfall from '../../widgets/Waterfall/ImgWaterfall'
import { useRecoilState } from 'recoil'
import { UserFollowListMock } from './mock'
import FollowWaterfall from '../../widgets/Waterfall/FollowWaterfall'
import FollowSideBar from '../../widgets/SideBar/FollowSideBar'

export default function Following(props: any) {
    const [followList, setFollowList] = useRecoilState(UserFollowListMock)
    const [width, setWidth] = useState<any>()

    useEffect(() => {
        $(`.${style.container}`).outerWidth(true)! > 1050 ? setWidth('70%') : setWidth('100%')
    }, [])

    return (
        <NavTabsLayout>
            <div
                className={style.container}
                style={{
                    ['--width-' as any]: width
                }}>
                <div className={style.content}>
                    <FollowingBanner />
                    {followList.length > 0 ? (
                        <FollowWaterfall />
                    ) : (
                        <span style={{ color: '#111111', fontSize: '15px', paddingLeft: '0.6rem' }}>
                            没有可展示的照片。关注一些LineView的摄影师，再回来刷新看看。
                        </span>
                    )}
                </div>
                <div className={style.sidebar}>
                    <FollowSideBar />
                </div>
            </div>
        </NavTabsLayout>
    )
}
